<template>
  <el-col :span="12">
    <div class="bg-purple-dark bg-purple" :style="{ height: '540px' }">
      <div class="cardInformation">
        <div class="blueIcon" />
        <div class="dataName">{{ tableCardName }}</div>
        <div class="recentlyDay">
          <span v-if="closeSeven">{{ $t('manage.nearSeven') }}</span>
          <span v-if="closeThirty">{{ $t('manage.nearThirty') }}</span>
        </div>
      </div>
      <div class="dataBox">
        <Rtable
          :col-by-data="true"
          :url="url"
          :conditions="conditions"
          :size="size"
          :stripe="true"
          :line-height="36"
          :col-formatter="colFormatter"
        />
      </div>
    </div>
  </el-col>
</template>

<script>
import Rtable from '@/components/r-table'
import { floatToFixed } from '@/utils/filter'

export default {
  name: 'TableCard',
  components: {
    Rtable
  },
  props: {
    tableCardName: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    section: {
      type: Object,
      default: () => {
        return {}
      }
    },
    size: {
      type: Number,
      default: () => {
        return 10
      }
    },
    closeSeven: {
      // 近7天排行
      type: Boolean,
      default: false
    },
    closeThirty: {
      // 近30天排行
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      conditions: {}
    }
  },
  watch: {
    section: {
      handler(newName, oldName) {
        this.conditions = { ...newName }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    colFormatter(row, column, cellValue, index) {
      return floatToFixed(cellValue)
    }
  }
}
</script>

<style scoped lang="scss">
@import '../components/style';
</style>
